<!--
 * @Author: jyq
 * @Date: 2023-01-16 11:18:14
 * @LastEditTime: 2023-01-17 13:20:48
 * @LastEditors: jyq
 * @Description: 
 * @FilePath: \dcollege\src\views\contact\userdata.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="main">
        <div class="header">
        <var-icon class="left_icon" name="chevron-left" size="40" />
        <svg t="1673839428451" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6072" width="30" height="30"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#2659f7" p-id="6073" data-spm-anchor-id="a313x.7781069.0.i0" class=""></path><path d="M716.8 576c-35.84 0-64-28.16-64-64s28.16-64 64-64 64 28.16 64 64-28.16 64-64 64z m-204.8 0c-35.84 0-64-28.16-64-64s28.16-64 64-64 64 28.16 64 64-28.16 64-64 64z m-204.8 0c-35.84 0-64-28.16-64-64s28.16-64 64-64 64 28.16 64 64-28.16 64-64 64z" fill="#ffffff" p-id="6074" data-spm-anchor-id="a313x.7781069.0.i3" class="selected"></path></svg>
        </div>
        <div class="mydata">
        <var-image
        class="myimage"
        width="85px"
        height="85px"
        fit="cover"
        radius="50%"
        src="https://varlet.gitee.io/varlet-ui/cat.jpg"
        />
        <p class="myname">蔡敏敏</p>
        <p class="myshenfen">学生</p>
        <p class="mynumber">21222123</p>
        <p class="myclass">19级数媒1班</p>
        <p class="mymajor">专业名称(居中显示)</p>
        <div class="list">
            <p>
                <svg t="1672546463789" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1285" width="17" height="17"><path d="M512.733284 147.039407c147.377077 0 266.754498 113.901768 266.754497 254.523442v24.843738c0 140.622673-119.376421 254.528437-266.754497 254.528437S245.979785 567.02926 245.979785 426.406587v-24.843738c0-140.621674 119.376421-254.523442 266.753499-254.523442z m0 0" fill="#FBE6CE" p-id="1286"></path><path d="M827.634763 308.286939c0-140.157128-135.097069-291.558275-263.807376-307.964254h-99.72661c-147.383071 0-261.354771 147.185264-261.354771 287.336398 0 0 2.946123 32.345413-0.489522 19.686775 18.665772 72.658045 5.399727 50.623563 59.930474 32.812956 43.723301-14.060269 114.957737 29.533159 177.839329 24.375196 43.231781-3.279797 117.901861-33.2805 156.22144-51.093105 32.424336 21.095399 92.356808 57.655696 123.800101 56.718611 71.234435-2.814252 107.586935-61.872578 107.586935-61.872577z m0 0" fill="#2A4259" p-id="1287"></path><path d="M244.009709 474.220894c-37.333541 0-67.300277-25.312281-67.300277-56.251068 0-30.933791 29.966736-56.715614 67.300277-56.715613m539.900753 0.468542c35.862978 0 64.847672 25.312281 64.847673 56.715614 0 31.407329-55.020269 56.251067-64.847673 56.251067" fill="#FBE6CE" p-id="1288"></path><path d="M407.601951 387.035036c17.685729 0 32.425335 14.05927 32.425335 30.933791s-14.738607 30.938786-32.425335 30.938787c-17.680734 0-32.421339-13.594724-32.421338-30.938787 0-16.874521 14.24409-30.933791 32.421338-30.933791z m0 0M622.334252 389.59054c17.685729 0 32.426334 14.058271 32.426333 30.933792s-14.740605 30.938786-32.426333 30.938786c-17.679735 0-32.42034-13.594724-32.42034-30.938786 0-16.87552 14.245089-30.933791 32.42034-30.933792z m0 0" fill="#002428" p-id="1289"></path><path d="M69.250373 986.838291H374.35442C499.461245 1006.627965 474.471649 1024 513.157869 1024c38.630275 0 12.68761-15.32903 138.802451-37.161709h305.109042c50.72846 1.395637 50.72846 1.395637 50.72846-28.860816V525.067239c0-28.861815 0-28.861815-32.536226-28.861815H589.104702l-75.946833 43.203809-75.944835-43.203809H54.469807c-35.804035 0-35.804035 0-35.804035 26.758869v437.115129c0 26.110501 0 26.110501 50.584601 26.758869z" fill="#60B4E1" p-id="1290"></path><path d="M526.424913 977.721194V587.637136c0-6.613541-2.702361-11.977303-6.038103-11.977304H506.075785c-3.332745 0-6.036105 5.363762-6.036105 11.977304v390.084058" fill="#2D7BC0" p-id="1291"></path><path d="M883.297405 601.341752c0 6.772386-5.75538 12.262025-12.852449 12.262026H647.678501c-7.097069 0-12.850451-5.489639-12.85045-12.262026v-6.374774c0-6.772386 5.75438-12.263024 12.85045-12.263025h222.766455c7.097069 0 12.852449 5.490638 12.852449 12.263025v6.374774zM774.057085 692.277947c0 6.772386-5.75538 12.263024-12.853448 12.263025H647.678501c-7.097069 0-12.850451-5.490638-12.85045-12.263025v-9.428792c0-6.771387 5.75438-12.262025 12.85045-12.262025h113.525136c7.098068 0 12.853448 5.490638 12.853448 12.262025v9.428792zM883.297405 805.476402c0 6.771387-5.75538 12.262025-12.852449 12.262025H647.678501c-7.097069 0-12.850451-5.490638-12.85045-12.262025v-8.176016c0-6.771387 5.75438-12.262025 12.85045-12.262025h222.766455c7.097069 0 12.852449 5.490638 12.852449 12.262025v8.176016z" fill="#F7F8FA" p-id="1292"></path></svg>
                努力学习中
            </p>
            </div>
        </div>
        <div class="addbtn">
            <svg t="1673932448914" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5658" width="27" height="27"><path d="M572.282915 587.416406A293.701506 293.701506 0 0 1 364.586038 86.028148a293.709605 293.709605 0 0 1 415.373506 415.363381 291.777918 291.777918 0 0 1-207.676629 86.024877z m0-523.195671a229.494165 229.494165 0 0 0-162.269829 391.804491 229.502265 229.502265 0 0 0 324.539658-324.590279 227.975543 227.975543 0 0 0-162.269829-67.214212z" fill="#ffffff" p-id="5659"></path><path d="M139.617367 1024H75.399902a499.029333 499.029333 0 0 1 499.424174-499.424174v64.217464a434.811868 434.811868 0 0 0-435.206709 435.20671z" fill="#ffffff" p-id="5660"></path><path d="M540.158997 773.96394m10.124147 0l388.19017 0q10.124147 0 10.124147 10.124147l0 44.546247q0 10.124147-10.124147 10.124147l-388.19017 0q-10.124147 0-10.124147-10.124147l0-44.546247q0-10.124147 10.124147-10.124147Z" fill="#ffffff" p-id="5661"></path><path d="M711.986021 602.136916m10.124147 0l44.546247 0q10.124147 0 10.124147 10.124147l0 388.190171q0 10.124147-10.124147 10.124147l-44.546247 0q-10.124147 0-10.124147-10.124147l0-388.190171q0-10.124147 10.124147-10.124147Z" fill="#ffffff" p-id="5662"></path></svg>
            <p class="mytext">添加朋友</p>
        </div>
    </div>
</template>
<script setup lang="ts">

</script>
<style lang="less" scoped>
.main{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(to bottom, #c7d6fa, white);
    .header{
        .left_icon{
            margin-left: 1px;
            margin-top: 14px;
        }
        .icon{
            float: right;
            margin-top: 20px;
            margin-right: 20px;
        }
    }
    .mydata{
        background-color: white;
        border-radius: 10px;
        width: 92%;
        height: 300px;
        margin-left: 15px;
        margin-top: 100px;
        position: relative;
        .myimage{
           position: absolute;
           top: -37px;
           left: 132px;
        }
        .myname{
            position: absolute;
            line-height: 0%;
            font-size: 25px;
            font-weight: 600;
            margin-top: 77px;
            margin-left: 132px;
        }
        .myshenfen{
            position: absolute;
            width: 50px;
            height: 23px;
            color: #fff;
            font-size: 14px;
            border-radius: 20px;
            text-align: center;
            background-color: #2659f7;
            margin-top: 100px;
            margin-left: 146px;
        }
        .mynumber{
            position: absolute;
            float: left;
            color: #b0b4c0;
            font-size: 16px;
            margin-top: 133px;
            margin-left: 87px;
        }
        .myclass{
            position: absolute;
            float: left;
            color: #b0b4c0;
            font-size: 16px;
            margin-top: 133px;
            margin-left: 174px;
        }
        .mymajor{
            position: absolute;
            float: left;
            color: #b0b4c0;
            font-size: 16px;
            margin-top: 166px;
            margin-left: 111px;
        }
        .list{
            background-color:  rgb(244,245,249);
            width: 165px;
            height: 45px;
            float: left;
            margin-left: 94px;
            margin-top: 223px;
            border-radius: 0px 20px 20px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            p{
                font-size: 16px;
                color: #000;
                line-height: 0%;
            }
        }
    }
    .addbtn{
        width: 180px;
        height: 50px;
        border-radius: 30px;
        background-color: #2659f7;
        margin-top: 220px;
        margin-left: 105px;
        color: #fff;
        position: relative;
        .icon{
            float: left;
            margin-left: 40px;
            margin-top: 10px;
            
        }
        .mytext{
            line-height: 0%;
            position: absolute;
            margin-left: 75px;
            margin-top: 24px;
        }
    }
}
</style>